import{_ as d}from"./index.vue_vue_type_style_index_0_lang2.js";import{d as l,e as c,r as o,P as g,Q as m,$ as p,K as k,a2 as u,a5 as P,R as s}from"./elementPlusModules.js";const N=s("p",null,"通过属性 pagination 设置表格受控分页，传入 false 禁用分页，默认开启",-1),y=s("p",null,"通过事件 page-change 函数监听分页变动",-1),L=l({__name:"Pager",setup(h){const t=c(`
<template>
  <div style="height: 70vh">
    <MerakXTable
      :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
      :columns="state.columns"
      :data="state.data"
      :pagination="pager"
      :on-page-change="handlePageChange"
    ></MerakXTable>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";

const pager = reactive({
  total: 100,
  pageSize: 50,
  currentPage: 1
});

const state = reactive<{
  columns: MerakXTableColumn[];
  data: any[];
}>({
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ],
  data: [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ]
});

const handlePageChange: MerakXTableInstance["onPage-change"] = ({ currentPage, pageSize }) => {
  if (!!currentPage) {
    pager.currentPage = currentPage;
  } else if (!!pageSize) {
    pager.currentPage = 1;
    pager.pageSize = pageSize;
  }
};
<\/script>
`),e=o({total:100,pageSize:50,currentPage:1}),n=o({columns:[{field:"name",title:"Name"},{field:"age",title:"Age"},{field:"address",title:"Address"}],data:[{id:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park",description:"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."},{id:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park",description:"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."},{id:"3",name:"Not Expandable",age:29,address:"Jiangsu No. 1 Lake Park",description:"This not expandable"},{id:"4",name:"Joe Black",age:32,address:"Sydney No. 1 Lake Park",description:"My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."}]}),i=({currentPage:a,pageSize:r})=>{a?e.currentPage=a:r&&(e.currentPage=1,e.pageSize=r)};return(a,r)=>(g(),m(P,null,[N,y,p(k(d),{"columns-by-store":JSON.parse(JSON.stringify(n.columns)),columns:n.columns,data:n.data,pagination:e,onPageChange:i},null,8,["columns-by-store","columns","data","pagination"]),u(a.$slots,"default",{html:t.value})],64))}});export{L as _};
